<template>
    <div class="page_root" :key="queryUpdateFlag" data-page-name="1" data-page-identification="k_0b41a5vodn">
        <a-spin :spinning="pageLoading.loading" :tip="pageLoading.tip">
            <!-- begin vid_h5nz920zjb 自定义模板_8539sq95bk -->
            <div class="body">
                <a-row :gutter="[16, 16]">
                    <!-- 数据来源占比 -->
                    <a-col :span="12">
                        <a-card title="数据来源占比分析">
                            <div ref="sourcePie" style="height: 300px"></div>
                        </a-card>
                    </a-col>

                    <!-- 责任方占比 -->
                    <a-col :span="12">
                        <a-card title="责任方占比分析">
                            <div ref="responsibilityPie" style="height: 300px"></div>
                        </a-card>
                    </a-col>

                    <!-- 业务渠道情况分析 -->
                    <a-col :span="24">
                        <a-card title="业务渠道情况分析">
                            <div ref="channelBar" style="height: 350px"></div>
                        </a-card>
                    </a-col>

                    <!-- 所辖区域规模结构分析 -->
                    <a-col :span="24">
                        <a-card title="所辖区域规模结构分析">
                            <div ref="regionStack" style="height: 350px"></div>
                        </a-card>
                    </a-col>

                    <!-- 工单完成情况结构分析 -->
                    <a-col :span="24">
                        <a-card title="工单完成情况结构分析">
                            <div ref="workOrder" style="height: 350px"></div>
                        </a-card>
                    </a-col>

                    <!-- 工单数量情况分析 -->
                    <a-col :span="24">
                        <a-card title="工单数量情况分析">
                            <div ref="multiLine" style="height: 350px"></div>
                        </a-card>
                    </a-col>
                </a-row>
            </div>
            <!-- end vid_h5nz920zjb 自定义模板_8539sq95bk -->
        </a-spin>
    </div>
</template>
<script setup lang="tsx">
    import {
        h,
        ref,
        reactive,
        toRaw,
        markRaw,
        watch,
        computed,
        onBeforeMount,
        onMounted,
        onBeforeUnmount,
        onUnmounted,
        onActivated,
        onDeactivated
    } from 'vue'
    import { useRoute, useRouter } from 'vue-router'
    const router = useRouter()
    const route = useRoute()
    import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios'
    import {
        cloneDeep,
        localGet,
        merge,
        getDifferenceArray,
        traversalTreeStructure,
        checkCaseCondition,
        renderStringInTemplate,
        handleBreadcrumbJump,
        throttle,
        permission,
        getComponentParamsValue
    } from '@/utils'
    import { isNullOrEmpty, isEmptyArr, isNullOrUnDef, isContained, isArray, isEmpty, isObject } from '@/utils/is'
    import dayjs from 'dayjs'
    import { getPagePcChartsDataSourceConvert } from '@/utils/chart'
    import { message, notification, Modal } from 'ant-design-vue'
    import {
        propertyFormatByNumber,
        propertyFormatByPercentage,
        propertyFormatByDate,
        parseSubFromDataList
    } from '@/utils/format'
    import colorTheme from '@/design/custom-theme.json'
    /*** PUBLISH_EXEGESIS ***
 import UserTableRecords from '@/model/UserTableRecords';
 import { getAppBaseUrl } from '@/utils/index';
 import { sendToken } from "@/hooks/useIframeToken";
 import { useSystemStore } from "@/store/modules/system";
 const systemStore = useSystemStore();
 *** PUBLISH_EXEGESIS ***/

    // 获取传入的流程ID和组件参数
    const props = defineProps({
        'processInstanceId': {
            type: [String, Number, Boolean],
            default: undefined
        },
        'treeProps': {
            type: [String, Object, Array, Boolean],
            default: undefined
        }
    })
    const immediateWatch = (source, callback) => {
        watch(source, callback, { deep: true, immediate: true })
    }

    /* -------------------------- 属性定义 -------------------------- */

    const setTimeOutList = []
    const pageLoading = reactive({
        loading: false,
        tip: undefined
    })
    const authInfo = localGet('app-user-store')

    // 处理校验
    const setSubFormName = (parentInfo, name) => {
        return [parentInfo.parents, parentInfo.cycleIndex, name]
    }

    /* ========================== 属性定义 ========================== */

    /* -------------------------- 元素数据引用 -------------------------- */

    /* ========================== 元素数据引用 ========================== */

    /* -------------------------- 页面数据 -------------------------- */

    /* ========================== 页面数据 ========================== */

    /* -------------------------- 响应 -------------------------- */

    /* ========================== 响应 ========================== */

    /* -------------------------- 函数 -------------------------- */

    /* ========================== 函数 ========================== */

    /* -------------------------- 页面参数 -------------------------- */

    const pageParameter_state = reactive({
        'processInstanceId': props.processInstanceId ?? route.query.processInstanceId
    })

    /* ========================== 页面参数 ========================== */

    /* -------------------------- 组件事件处理方法 -------------------------- */

    // ---------------------------- 组件数据同步 ----------------------------

    // ============================ 组件数据同步 ============================

    /* ========================== 组件事件处理方法 ========================== */

    /* -------------------------- 生命周期 -------------------------- */
    // 用于参数变更后重新执行自定义指令
    const queryUpdateFlag = ref(0)
    onMounted(() => {})

    onUnmounted(() => {
        // 销毁定时器
        setTimeOutList.forEach(({ repeat, timer }) => {
            repeat ? clearInterval(timer) : clearTimeout(timer)
        })
    })

    /* ========================== 生命周期 ========================== */

    /* -------------------------- 数据关联处理 -------------------------- */

    /* -------------------------- 表单数据同步 -------------------------- */
    /* ========================== 表单数据同步 ========================== */

    /* ========================== 数据关联处理 ========================== */

    /* -------------------------- 不同组件自定义的处理逻辑 -------------------------- */

    /* ========================== 不同组件自定义的处理逻辑 ========================== */

    // ================================定制化逻辑========================================
    import * as echarts from 'echarts'

    // 定义 DOM 引用
    const sourcePie = ref(null)
    const responsibilityPie = ref(null)
    const channelBar = ref(null)
    const regionStack = ref(null)
    const workOrder = ref(null)
    const multiLine = ref(null)

    onMounted(() => {
        // 数据来源占比
        echarts.init(sourcePie.value).setOption({
            tooltip: { trigger: 'item' },
            series: [
                {
                    type: 'pie',
                    radius: '60%',
                    data: [
                        { value: 820, name: '系统A' },
                        { value: 435, name: '系统B' },
                        { value: 260, name: '系统C' },
                        { value: 120, name: '系统D' }
                    ]
                }
            ]
        })

        // 责任方占比
        echarts.init(responsibilityPie.value).setOption({
            tooltip: { trigger: 'item' },
            series: [
                {
                    type: 'pie',
                    radius: '60%',
                    data: [
                        { value: 500, name: '工厂' },
                        { value: 300, name: '研发' },
                        { value: 200, name: '供应商' },
                        { value: 100, name: '物流' }
                    ]
                }
            ]
        })

        // 业务渠道情况分析
        echarts.init(channelBar.value).setOption({
            tooltip: { trigger: 'axis' },
            legend: {},
            xAxis: { type: 'category', data: ['人口', '渠道', '客户', '设备'] },
            yAxis: { type: 'value' },
            series: [
                { name: '系统A', type: 'bar', stack: '总量', data: [200, 150, 180, 140] },
                { name: '系统B', type: 'bar', stack: '总量', data: [197, 140, 190, 150] },
                { name: '系统C', type: 'bar', stack: '总量', data: [189, 192, 200, 194] },
                { name: '系统D', type: 'bar', stack: '总量', data: [152, 193, 137, 152] }
            ]
        })

        // 所辖区域规模结构分析
        echarts.init(regionStack.value).setOption({
            tooltip: { trigger: 'axis' },
            legend: {},
            xAxis: { type: 'category', data: ['华东', '华南', '华北', '西部', '东北'] },
            yAxis: { type: 'value' },
            series: [
                { name: '产品A', type: 'bar', stack: '总量', data: [2100, 1500, 1400, 1200, 900] },
                { name: '产品B', type: 'bar', stack: '总量', data: [1800, 1300, 1000, 800, 700] },
                { name: '产品C', type: 'bar', stack: '总量', data: [1500, 1100, 900, 700, 600] }
            ]
        })

        // 工单完成情况结构分析（柱 + 折线）
        echarts.init(workOrder.value).setOption({
            tooltip: { trigger: 'axis' },
            legend: {},
            xAxis: { type: 'category', data: Array.from({ length: 10 }, (_, i) => '工单库' + (i + 1)) },
            yAxis: [
                { type: 'value', name: '工单数' },
                { type: 'value', name: '达成率(%)' }
            ],
            series: [
                { name: '工单数', type: 'bar', data: [100, 90, 80, 70, 65, 60, 55, 50, 45, 40] },
                { name: '达成率', type: 'line', yAxisIndex: 1, data: [60, 65, 70, 75, 80, 82, 85, 88, 90, 92] }
            ]
        })

        // 工单数量情况分析（多折线）
        echarts.init(multiLine.value).setOption({
            tooltip: { trigger: 'axis' },
            legend: {},
            xAxis: { type: 'category', data: Array.from({ length: 12 }, (_, i) => `${i + 1}月`) },
            yAxis: { type: 'value' },
            series: [
                { name: '工单A', type: 'line', data: [320, 400, 350, 480, 520, 600, 720, 690, 640, 580, 500, 460] },
                { name: '工单B', type: 'line', data: [200, 240, 280, 300, 350, 370, 400, 420, 430, 410, 390, 380] },
                { name: '工单C', type: 'line', data: [150, 200, 220, 260, 300, 340, 360, 380, 390, 400, 380, 370] }
            ]
        })
    })
</script>
<style lang="less" scoped>
    .page_root {
        width: 100%;
        height: 100%;
        overflow: auto;
    }
    .page_root :deep(.@{ant-prefix}-spin-nested-loading),
    .page_root :deep(.@{ant-prefix}-spin-container) {
        height: 100%;
    }
    .page_root :deep(.@{ant-prefix}-spin-container .@{ant-prefix}-table-wrapper) {
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start;
    }
    .page_root :deep(.@{ant-prefix}-table) {
        flex: auto;
        overflow: auto;
    }
    .table-moreBtn_down {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 100px;
    }

    .table-moreBtn_menu :deep(.table-moreBtn_menu-item):hover {
        background: #ebf1ff;
    }

    /*  表格树结构样式处理，展开按钮层级增加*/
    :deep(.@{ant-prefix}-table-row-expand-icon) {
        z-index: 1;
    }
    /*  表格树结构 由于每个表格项采用自定义组件，使用绝对定位布局，开启树结构导致显示异常，暂时使用层级定位位置 */
    :deep(.@{ant-prefix}-table-row-level-1 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 15px !important;
        width: calc(100% - 15px);
    }
    :deep(.@{ant-prefix}-table-row-level-2 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 30px !important;
        width: calc(100% - 30px);
    }
    :deep(.@{ant-prefix}-table-row-level-3 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 45px !important;
        width: calc(100% - 45px);
    }
    :deep(.@{ant-prefix}-table-row-level-4 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 60px !important;
        width: calc(100% - 60px);
    }

    /* 穿梭框改变默认样式，为根据组件样式控制左右栏宽度。 */
    :deep(.@{ant-prefix}-transfer-list) {
        height: 100%;
        width: 50%;
    }
    .body {
        padding: 12px 20px;
        height: 100%;
        overflow: auto;
      background-color: #fff;
    }
</style>
